<template>
  <!-- 评价 -->
  <div id="appraise">
    <!-- <van-nav-bar class="header"
                 ref="header"
                 @click-left="goback"
                 :border="false">
      <div class="left"
           slot="left">
        <van-icon name="arrow-left"
                  size="24px"
                  color="#fff" />
      </div>
      <div class="title"
           slot="title">评价</div>
    </van-nav-bar> -->
    <div class="header">
      <div class="left"
           @click="goback"><img src="@/assets/img/public/leftarrow.png"
             alt=""></div>
      <div class="title">评价</div>
      <!-- <div class="right"
           @click="confirmEdit">完成</div> -->
    </div>
    <div class="main"
         ref="main">
      <div class="infos bdr bgwrite flex flex-space-x">
        <div class="ileft flex">
          <div class="headImg">
            <img :src="pictureUrl"
                 width="100%"
                 height="100%"
                 alt="">
          </div>
          <div class="name fz2">{{userName}}</div>
        </div>
        <div class="iright flex">
          <div class="follow fz4 wordsWrite bgprimary"
               v-if="!attention"
               @click="insertAttentionOrBlacklist('1')">关注</div>
          <div class="hasfollow fz4"
               @click="designerDelBlacklist(attentionUid)"
               v-else>已关注</div>
        </div>
      </div>
      <!-- 星级 -->
      <div class="rates bdr bgwrite">
        <div class="rstit fz5 wordsGray">星级</div>
        <div class="rates-content">
          <div class="rate flex flex-space-x">
            <div class="rtit fz4 wordstxt">效率</div>
            <van-rate v-model="efficiency"
                      void-color="#E5E5E5"
                      @change="show_submit"
                      color="#FFBA5A" />
          </div>
          <div class="rate flex flex-space-x">
            <div class="rtit fz4 wordstxt">服务</div>
            <van-rate v-model="service"
                      @change="show_submit"
                      void-color="#E5E5E5"
                      color="#FFBA5A" />
          </div>
          <div class="rate flex flex-space-x">
            <div class="rtit fz4 wordstxt">沟通</div>
            <van-rate v-model="communicate"
                      @change="show_submit"
                      void-color="#E5E5E5"
                      color="#FFBA5A" />
          </div>
          <div class="rate flex flex-space-x">
            <div class="rtit fz4 wordstxt">质量</div>
            <van-rate v-model="quality"
                      @change="show_submit"
                      void-color="#E5E5E5"
                      color="#FFBA5A" />
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="rates bdr bgwrite">
        <div class="rstit wordsGray">
          <div class="left">内容 (选填)</div>
          <div class="right">{{txtnum}}/200</div>
        </div>
        <textarea rows="4"
                  @click="inputfocus"
                  ref="cinput"
                  v-model="content"
                  placeholder="表现师服务如何、效率、沟通有没有问题？对质量是否满意～"
                  class="content fz4"></textarea>
      </div>
      <!-- 上传图片 -->
      <div class="rates bdr  bgwrite">
        <div class="rstit wordsGray">
          <div class="left">图片凭证 (选填)</div>
          <div class="right">{{imgList.length}}/9</div>
        </div>
        <div class="list flex">
          <div class="voucher"
               @click="show_preview(index)"
               v-if="imgList.length>0"
               v-for="(item,index) in imgList"
               :key="index">
            <img :src="item"
                 width="100%"
                 alt="">
          </div>
		  <div class="uploadpic"
		       @touchstart="uploadImage"
		       v-if="imgList.length<9">
		    <img src="@/assets/img/public/addImg.png"
		         width="100%"
		         height="100%"
		         alt="">
        </div>

        </div>
      </div>
      <div class="on-off bdr bgwrite flex flex-space-x">
        <div class="fz4">合作不愉快，拉入黑名单</div>
        <van-switch v-model="black"
                    @change="change_black"
                    active-color="#5E8EFE" />
      </div>
    </div>
    <div class="submitBtn flex fz4">
      <div class="btn bgprimary wordsWrite"
           v-if="showBtn"
           @click="submit">提交</div>
      <div class="btn btn1  wordsWrite"
           v-else>提交</div>
    </div>
    <van-image-preview v-model="showPreview"
                       :images="imgList"
                       :startPosition="index"
                       @change="onChange">
    </van-image-preview>
  </div>
</template>
<script>
import apiConfig from "@/api/index";
import { getuserUid } from "@/utils/auth";
import {compressImage,toBase64} from '@/utils/chat.js'
export default {
  data() {
    return {
      // buserUid: this.$route.params.buserUid,
      buserUid: "",
      // orderUid: this.$route.params.uid,
      orderUid: "",
      attentionUid: "",
      blackUid: "",
      userName: "",
      pictureUrl: "",
      black: false,
      attention: false,
      showBtn: false,
      efficiency: 0, //效率
      service: 0, //服务
      communicate: 0, //沟通
      quality: 0, //质量
      txtnum: 0,
      content: "",
      showPreview: false,
      imgList: [],
      index: 0,
      userEfficiencyHistorys2: ""
    };
  },
  watch: {
    content() {
      (this.content.length <= 200 && (this.txtnum = this.content.length)) ||
        ((this.txtnum = 200), (this.content = this.content.slice(0, 200)));
    }
  },
  created() {
	  console.log('1.0');
    this.selectAttentionOrBlackByuser();
  },
  methods: {
    show_preview(index) {
      this.showPreview = true;
      this.index = index;
    },
    onChange(index) {
      this.index = index;
    },
    inputfocus() {
      this.$refs.cinput.focus();
    },
    //是否关注，拉黑
    async selectAttentionOrBlackByuser() {
      this.buserUid = this.$route.query?.buserUid;
      this.orderUid = this.$route.query?.uid;
      const e = await HTTP("selectAttentionOrBlackByuser", {
        userUid: getuserUid(),
        buserUid: this.buserUid
      });
      // console.log(e);
      if (e.code == 200) {
        this.userName = e.data.userName;
        this.pictureUrl = e.data.pictureUrl;
        this.attention = e.data.attention;
        this.attentionUid = e.data.attentionUid;
        this.black = e.data.black;
        this.blackUid = e.data.blackUid;
      } else {
        this.$toast(e.msg || "服务器异常");
      }
    },
    //添加关注，黑名单
    async insertAttentionOrBlacklist(type) {
      const e = await HTTP(
        "app/attentionOrBlacklist/insertAttentionOrBlacklist",
        {
          type,
          attentionUserUid: this.buserUid,
          createBy: getuserUid()
        }
      );
      if (e.code == 200) {
        this.selectAttentionOrBlackByuser();
      } else {
        this.$toast(e.msg || "服务器异常");
      }
    },
    //删除关注，黑名单
    async designerDelBlacklist(uid) {
      const e = await HTTP("designerDelBlacklist", {
        uid
      });
      if (e.code == 200) {
        this.selectAttentionOrBlackByuser();
      } else {
        this.$toast(e.msg || "服务器异常");
      }
    },
    //打开相册
    uploadImage() {
      const _this = this;
      plus.gallery.pick(
        path => {
          if (path) {
			// 压缩图片
			compressImage(path)
			.then(res=>{
				// 转base64
				toBase64(res)
				.then(base64=>{
					this.imgList.push(base64);
				})
			})
			  
			//彬文代码
            // var imgpath=path
            // var image = new Image();
            // image.src = path;        
            // image.onload = function() {
            //   _this.getBase64Image(image);
            // };
          }
        },
        {
          filter: "image"
        }
      );
    },
    submit() {
      // if (this.imgList.length > 0) {
        this.$toast.loading({
          duration: 0,
          mask: true,
          message: "加载中..."
        });
        this.add_assess2();
      // }
    },
    //将图片压缩转成base64
    getBase64Image(img) {
      var canvas = document.createElement("canvas");
      var width = img.width;
      var height = img.height;
      canvas.width = width; /*设置新的图片的宽度*/
      canvas.height = height; /*设置新的图片的长度*/
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, width, height); /*绘图*/
      var dataURL = canvas.toDataURL("image/jpeg", 0.4);
      //  this.showSize(dataURL)
      this.imgList.push(dataURL);
    },
    async add_assess2() {
      const e = await HTTP("add_assess2", {
        orderUid: this.orderUid,
        userUid: this.buserUid,
        createBy: getuserUid(),
        content: this.content,
        userEfficiencyHistorys2: this.userEfficiencyHistorys2,
        imgbase64:this.imgList
      });
      // console.log(e);
      if (e.code == 200) {
        this.$toast.clear();
        this.$toast("评价成功！");
        setTimeout(() => {
          this.$router.push("/designer/orderCenter");
        }, 1000);
      } else {
        this.$toast(e.msg || "服务器异常");
      }
    },
    //拉黑
    change_black() {
      // console.log(this.black);
      if (this.black) {
        this.insertAttentionOrBlacklist("2");
      } else {
        this.designerDelBlacklist(this.blackUid);
      }
    },
    //显示提交按钮
    show_submit() {
      let userEfficiencyHistorys2 = [];
      if (this.efficiency > 0) {
        userEfficiencyHistorys2.push({
          assessType: 1,
          score: this.efficiency
        });
      }
      if (this.service > 0) {
        userEfficiencyHistorys2.push({
          assessType: 2,
          score: this.service
        });
      }
      if (this.communicate > 0) {
        userEfficiencyHistorys2.push({
          assessType: 3,
          score: this.communicate
        });
      }
      if (this.quality > 0) {
        userEfficiencyHistorys2.push({
          assessType: 4,
          score: this.quality
        });
      }
      if (
        this.efficiency > 0 &&
        this.communicate > 0 &&
        this.service > 0 &&
        this.quality > 0
      ) {
        this.userEfficiencyHistorys2 = JSON.stringify(userEfficiencyHistorys2);
        this.showBtn = true;
      }
    },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
#appraise {
  overflow: hidden;
  // .header {
  //   position: absolute;
  //   width: 100%;
  //   height: 0.92rem;
  //   background: $color-primary;
  //   z-index: 200;
  //   .title {
  //     color: #ffffff;
  //   }
  // }
  .header {
    z-index: 200;
    background: #5e8efe;
    color: #ffffff;
    height: 0.92rem;
    line-height: 0.92rem;
    box-sizing: border-box;
    padding: 0 3%;
    display: flex;
    div {
      display: inline-block;
      vertical-align: top;
    }
    .left {
      width: auto;
      margin-top: 0.15rem;
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
    }
    .title {
      color: #ffffff;
      font-size: 0.35rem;
      text-align: center;
      flex: 1;
    }
    .right {
      font-size: 0.32rem;
      height: 0.92rem;
      line-height: 0.92rem;
      width: auto;
    }
  }
  .main {
    overflow-y: scroll;
    /*增加弹性滚动,解决滚动不流畅的问题*/
    // -webkit-overflow-scrolling: touch;
    // margin-top: 0.92rem;
    padding: 0.2rem 0.24rem 0 0.24rem;
    touch-action: auto;
    box-sizing: border-box;
    margin-bottom: 1.84rem;
    height: calc(100vh - 2.56rem);
    .infos {
      padding: 0.4rem 0.28rem;
      margin-bottom: 0.24rem;
      .ileft {
        align-items: center;
        .headImg {
          height: 1.28rem;
          width: 1.28rem;
          border-radius: 90px;
          overflow: hidden;
        }
        .name {
          margin-left: 0.24rem;
          font-weight: bold;
        }
      }
      .iright {
        align-items: center;
        .follow {
          width: 1.56rem;
          height: 0.7rem;
          line-height: 0.7rem;
          text-align: center;
          border-radius: 6px;
        }
        .hasfollow {
          width: 1.56rem;
          height: 0.7rem;
          line-height: 0.7rem;
          text-align: center;
          border-radius: 6px;
          background-color: #f5f5f5;
          color: #cccccc;
        }
      }
    }
    /* 星级 */
    .rates {
      margin-bottom: 0.24rem;
      .rstit {
        height: 0.64rem;
        line-height: 0.64rem;
        padding-left: 0.24rem;
        border-bottom: 1px solid #f9f9f9;
        position: relative;
        .right {
          position: absolute;
          right: 0.24rem;
          top: 0.05rem;
        }
      }
      .rates-content {
        padding: 0.28rem 0;
        .rate {
          padding: 0 0.24rem;
          margin-bottom: 0.24rem;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      .content {
        width: calc(100% - 0.48rem);
        padding: 0.24rem;
        border: none;
      }
      .list {
        padding: 0.24rem 0.24rem 0 0.24rem;
        flex-wrap: wrap;
        .voucher {
          width: 1.68rem;
		  height: 1.68rem;
          margin-right: 0.24rem;
          margin-bottom: 0.24rem;
		  overflow: hidden;
		  img{
			  width: 100%;
			  min-height: 1.68rem;
		  }
        }
      }
      .uploadpic {
        position: relative;
        margin-left: 0.24rem;
        margin-bottom: 0.24rem;
        width: 1.68rem;
        height: 1.68rem;
		img{
			width: 100%;
			height: 100%;
		}
      }
    }
    .on-off {
      height: 1rem;
      align-items: center;
      padding: 0 0.24rem;
      margin-bottom: 0.24rem;
    }
    /* 圆角 */
    .bdr {
      border-radius: 0.1rem;
    }
  }
  .submitBtn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.6rem;
    align-items: center;
    background: #f9f9f9;
    border-top: 1px solid #e5e5e5;
    z-index: 1000;
    .btn {
      margin: auto;
      text-align: center;
      width: 94%;
      height: 0.88rem;
      line-height: 0.88rem;
      border-radius: 0.1rem;
    }
    .btn1 {
      background-color: #dfe8ff;
    }
  }
}
</style>
